<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
    .FancyBorder {
        padding: 10px 10px;
        border: 10px solid;
    }

    .FancyBorder-blue {
        border-color: blue;
    }

    .Dialog-title {
        margin: 0;
        font-family: sans-serif;
    }

    .Dialog-message {
        font-size: larger;
    }
    </style>
</head>
<body>
    <div id="root"></div>
    <script src="../../js/react.js" charset="utf-8"></script>
    <script src="../../js/react-dom.js" charset="utf-8"></script>
    <script src="../../js/browser.min.js" charset="utf-8"></script>

    <script type="text/babel">
    function FancyBorder(props) {
        return (
            <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
            </div>
        )
    }

    function WelcomeDialog() {
        return (
            <FancyBorder color="blue">
            <h1 className="Dialog-title">
            Welcome
            </h1>
            <p className="Dialog-message">
            Thank you for visiting our spacecraft!
            </p>
            </FancyBorder>
        )
    }

    function Contacts() {
        return <div className="Contacts" />;
    }

    function Chat() {
        return <div className="Chat" />;
    }

    function SplitPane(props) {
        return (
            <div className="SplitPane">
            <div className="SplitPane-left">
            {props.left}
            </div>
            <div className="SplitPane-right">
            {props.right}
            </div>
            </div>
        );
    }

    function App() {
        return (
            <SplitPane
            left={
                <Contacts />
            }
            right={
                <Chat />
            } />
        );
    }




    function FancyBorder(props) {
        return (
            <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
            </div>
        );
    }

    function Dialog(props) {
        return (
            <FancyBorder color="blue">
                <h1 className="Dialog-title">
                    {props.title}
                </h1>
                <p className="Dialog-message">
                    {props.message}
                </p>
                {props.children}
            </FancyBorder>
        );
    }

    class SignUpDialog extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.handleSignUp = this.handleSignUp.bind(this);
            this.state = {login: ''};
        }

        render() {
            return (
                <Dialog title="Mars Exploration Program"
                message="How should we refer to you?">
                <input value={this.state.login}
                onChange={this.handleChange} />
                <button onClick={this.handleSignUp}>
                Sign Me Up!
                </button>
                </Dialog>
            );
        }

        handleChange(e) {
            this.setState({login: e.target.value});
        }

        handleSignUp() {
            alert(`Welcome aboard, ${this.state.login}!`);
        }
    }

    ReactDOM.render(
        <SignUpDialog />,
        document.getElementById('root')
    );



    </script>
</body>
</html>
